<template>
	<view style="padding: 10px">
		<uni-section title="看板" class="mb-10" type="line"> </uni-section>
		<view class="uni-card">
			<uni-grid
				:column="3"
				:show-border="false"
				:square="false"
				@change="bqcheckChange"
			>
				<uni-grid-item
					v-for="(item, index) in kbList"
					:index="index"
					:key="index"
				>
					<view class="grid-item-box">
						<image
							class="image"
							:src="item.url"
							mode="aspectFill"
						/>
						<text class="text">{{ item.text }}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
import { post, postForm } from '../../utils/request.js';
export default {
	data() {
		return {
			maskColor: 'rgba(0, 0, 0, 0.4)',
			kbList: [
				{
					url: '/static/kanban.svg',
					text: '设备功能看板',
					path: '/pages/KanBan/gnKB/index',
				},
				{
					url: '/static/kanban.svg',
					text: '设备精度看板',
					path: '/pages/KanBan/jdKB/index',
				},
				{
					url: '/static/kanban.svg',
					text: '日事日毕看板',
					path: '/pages/KanBan/dayKB/index',
				},
				],
			userInfor: uni.getStorageSync('userInfor'),
			checkShop: [],
			ShopOption: [],
			isDerive: '',
			isRectify: '',
		};
	},

	onShow() {
		this.userInfor = uni.getStorageSync('userInfor');
	},
	onLoad() {},
	methods: {
		bqcheckChange(e) {
			const index = e.detail.index;
			const path = this.kbList[index].path;
			if (!path) {
				return;
			}
			uni.navigateTo({
				url: path,
			});
		},
		checkChange(e) {
			const index = e.detail.index;
			const path = this.djList[index].path;
			if (!path) {
				return;
			}
			uni.navigateTo({
				url: path,
			});
		},
		dialogConfirm() {
			this.dialogClose();
		},

		dialogClose() {
			console.log('点击关闭');
		},
	},
};
</script>

<style>
.uni-badge {
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-font-feature-settings: 'tnum';
	font-feature-settings: 'tnum';
	min-width: 20px;
	justify-content: center;
	flex-direction: row;
	height: 20px;
	padding: 0 4px;
	line-height: 18px;
	color: #fff;
	border-radius: 100px;
	background-color: #909399;
	background-color: transparent;
	border: 1px solid #fff;
	text-align: center;
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 12px;
}
.uni-section {
	background-color: rgba(237, 237, 237, 0.9) !important;
}
.uni-section .uni-section-header__content .distraction {
	color: #2979ff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}
.uni-card {
	background-color: #fff;
	border-radius: 10px;
}
.mb-10 {
}
.uni-section-content {
	padding: 0px;
}
.image {
	width: 25px;
	height: 25px;
}
.text {
	font-size: 14px;
	margin-top: 5px;
}
.example-body {
	/* #ifndef APP-NVUE */
	// display: block;
	/* #endif */
}
.grid-dynamic-box {
	margin-bottom: 15px;
}
.grid-item-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
}
.grid-item-box-row {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}
.grid-dot {
	position: absolute;
	top: 5px;
	right: 15px;
}
.swiper {
	height: 420px;
} /* 全局样式或当前页面的样式 */
.uni-popup__mask {
	background-color: rgba(0, 0, 0, 0.4) !important; /* 强制覆盖 */
}
/* 确保弹框居中 */
.uni-popup-dialog {
	box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
